
import React from 'react';
// import type { PaginationProps } from 'antd';
import { Pagination, Divider, List, Typography } from 'antd';
import axios from 'axios';
import { useEffect, useState } from 'react';

export default function Userlist() {
    const [data, setdata] = useState([]);
    const [page, setpage] = useState(1);
    const [num, setnum] = useState();
    const [pagesize, setpagesize] = useState(20);
    useEffect(() => {
        axios.get(`https://elm.cangdu.org/v1/users/list?offset=${(page - 1) * pagesize}&limit=${pagesize}`).then(res => {
            setdata(res.data)
        })
        axios.get('https://elm.cangdu.org/v1/users/count').then(res => {
            if (res.data.status == 1) {
                setnum(res.data.count);
            }
        })
    }, [page,pagesize])
    function pageChange(page, pageSize) {
        console.log(page);
        setpage(page)
    }
    function pageSizeChange(current, size) {
        console.log(size);
        setpagesize(size)
    }
    return (
        <div id="userList">
            <div className="content">
                <div className="table">
                    <List
                        style={{ width: '100%' }}
                        header={
                            <ul style={{ display: 'flex', listStyle: 'none' }}>
                                <li style={{ width: '100px' }}>#</li>
                                <li style={{ width: '220px' }}>注册日期</li>
                                <li style={{ width: '220px' }}>用户姓名</li>
                                <li style={{ flex: '1' }}>注册地址</li>
                            </ul>
                        }
                        bordered  // 展示边框
                        dataSource={data}  // 列表数据源
                        renderItem={(item, index) => (
                            <List.Item>
                                <ul style={{ display: 'flex', listStyle: 'none' }}>
                                    <li style={{ width: '100px' }}>{index + 1}</li>
                                    <li style={{ width: '220px' }}>{item.registe_time}</li>
                                    <li style={{ width: '220px' }}>{item.username}</li>
                                    <li style={{ flex: '1' }}>{item.city}</li>
                                </ul>
                            </List.Item>
                        )}
                    />
                </div>
                <div className="pagination" style={{ display: 'flex' }}>
                    <Pagination
                        onShowSizeChange={pageSizeChange}  // pagesize变化的回调函数
                        defaultCurrent={1}  // 默认的当前页数
                        total={num}  // 数据总数
                        onChange={pageChange}
                        showTotal={(num) => `共 ${num} 条`}
                        pageSize={pagesize}
                        current={page}
                        showQuickJumper
                        showSizeChanger
                    />
                </div>

                <br />
            </div>
        </div>
    )
}